<template>
	<view class="content">
		<view class="left">
			<view v-for="(item, index) in categoryList" :key="index" 
			:class="currentMenuIndex == index ? 'menuitemselected' : 'menuitem'" @click="changeCategory(index)"> {{item.name}} </view>
		</view>
		    
		<view class="right">
			<view class="detail">
				<view class="main">
					<view v-for="(item1, index1) in categoryList[currentMenuIndex].child" :key="index1" 
					class="items"
					:class="index1 % 3 == 1 ? 'middle' : ''" @click="toGoodsList(item1.id)">
						<image :src="item1.image" mode="aspectFill"></image>
						<view>{{item1.name}}</view>
					</view>
				</view>
			</view> 
		</view>
			
	</view>
</template>

<script>
	
	import {Category} from '@/utils/model/category-model.js';
	var category = new Category();
	
	export default {
		data() { 
			return {
				currentMenuIndex: 0,
				categoryList: [],
			}
		},
		onLoad() {
			category.getList().then(res => {
				if (res.code == 1) {
					this.categoryList = res.data.list
				}
			}).catch(err => {
				console.log(err)
			})
			
			
		},
		methods: {
			changeCategory(index){
				this.currentMenuIndex = index
				console.log(this.categoryList[index].child)
			},
			toGoodsList(category_id){
				uni.navigateTo({
					url: '/pages/goods/list?category_id='+category_id
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
</style>
 
<style scoped lang="scss">
	@import '~@/pages/category/index.scss';
</style>